﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻舆情Demo</title>
    <link rel="stylesheet" type="text/css" href="jqcloud.css" />
    <script src="echarts.js"></script>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript" src="jqcloud-1.0.4.js"></script>

</head>
<body style="text-align: center;">
<div style="margin: 0 auto;width:1200px;height:1800px;">
    <div id="filter_block" style="width:100%;height: 50px;float: left;">
        <div style="width: 20%;float: left">
            <a style="width: 100%;color: royalblue;font-weight: bold">情感极性</a>
            <select id="polarity_select" style="width: 100%">
                <option value="all">全部</option>
                <option value="1">正面</option>
                <option value="-1">负面</option>  
                <option value="0">中性</option>
            </select>
        </div>
        <div style="width: 20%;float: left">
            <a style="width: 100%;color: royalblue;font-weight: bold">舆情来源</a>
            <select id="src_select" style="width: 100%">
                <option value="all">全部</option>
                <option value="新浪">新浪</option>
                <option value="搜狐">搜狐</option>
                <option value="腾讯">腾讯</option>
                <option value="新华">新华</option>
                <option value="网易">网易</option>

            </select>
        </div>
        <div style="width: 20%;float: left">
            <a style="width: 100%;color: royalblue;font-weight: bold">舆情时间</a>
            <select id="time_select" style="width: 100%">
                <option value="week">最近7天</option>
                <option value="month">最近一月</option>
                <option value="year">最近一年</option>
                <option value="day">最近24小时</option>
                <option value="all">所有时间</option>
            </select>
        </div>
        <div style="width: 20%;float: left">
            <a style="width: 100%;color: royalblue;font-weight: bold">关注话题</a>
            <input id="topic_input" style="width: 100%">
        </div>
        <div style="width: 20%;float: left">
            <button id="news_search_btn" type="submit" style="width: 100%;height: 40px;background:#2f435e;color:#f2f2f2;padding: 10px 30px 10px 30px;font-size:16px;font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;font-weight:bold;">查看舆情</button>
        </div>
    </div>
    <div id="news_block" style="width: 100%;height: 800px;">
        <div id="news_block_head" style="width: 100%;height: 10%;">
            <h4 style="color: gainsboro">根据您的条件筛选出0条舆情</h4>
        </div>
        <div style="width: 100%;height: 80%;background-color: #f0f0f4">
            <table id="news_table" style="width: 100%;height: 100%;">
                <thead style="height: 8%;background-color: black;color: white;font-weight: bold">
                <tr>
                    <th class="title">标题</th>
                    <th class="source">来源</th>
                    <th class="media-type">媒体类型</th>
                    <th class="polarity">舆情属性</th>
                    <th class="pub_time">发表日期<i></i></th>
                    <th class="J_sortBtn sort-btn relate">关联度<i></i></th>
                    <th class="mani">操作</th>
                </tr>
                </thead>
                <tbody id="news_list">
                </tbody>
            </table>
        </div>

        <div id="page_nav">
            <a>0</a>
        </div>
    </div>
    <div id="news_analyze_block" style="width: 100%;height: 25%;">
        <div style="width: 100%;height: 8%;color: white;background-color: black"><h2>舆情内容</h2></div>
        <div style="width: 100%;height: 92%;color: white">
            <div style="width: 49.8%;height: 100%;background-color: black;float: left;">
                <div style="width: 100%;height: 5%;background-color: gray;color: white;font-weight: bold">舆情摘要</div>
                <p id="single_news_summary_1" style="text-align: left;color: white"></p>
                <p id="single_news_summary_2" style="text-align: left;color: white"></p>
                <p id="single_news_summary_3" style="text-align: left;color: white"></p>
            </div>

            <div style="width: 50%;height: 100%;background-color: black;float: right">
                <div style="width: 100%;height: 5%;background-color: gray;color: white;font-weight: bold">文章词云</div>
                <div id="news_word_cloud" style="width: 100%;height: 90%"></div>
            </div>
        </div>

    </div>
    <div style="height: 30px"></div>
    <div id="news_trend_block" style="height:400px;">
        <h2>话题趋势</h2>
        <div id="topic_select" style="width:30%;height: 80%;background-color:lightblue;float: left">
            <br><br><br>
            <a style="color: royalblue;font-weight: bold">追踪话题:</a><br>
            <input id="track_topic"><br><br>
            <a style="color: royalblue;font-weight: bold">追踪模式:</a><br>
            <select id="track_mode">
                <option value="day_month">最近一月</option>
                <option value="day_week">最近一周</option>
                <option value="day_year">最近一年(日计)</option>
                <option value="week_year">最近一年(周计)</option>
                <option value="month_year">最近一年(月计)</option>
            </select><br><br><br>
            <button id="show_topic_trend" style="background:#2f435e;color:#f2f2f2;padding: 10px 30px 10px 30px;font-size:16px;font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;font-weight:bold;">查看话题趋势</button>

        </div>
        <div style="width:69%;height: 80%;background-color: lightcyan;float: right">
            <div id="topic_trend_graph" style="width: 100%;height:100%;float: left"></div>
        </div>
    </div>

</div>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('topic_trend_graph'));

    $("#show_topic_trend").click(function(){
        var post_data = {
            "topic":$("#track_topic").val(),
            "time_mode":$("#track_mode").val()
        }

        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:8888/?target=topic_trend",
            data: JSON.stringify(post_data), //可选参数
            success: function(data, status){
                var x_data = []
                var y_data = []
                for (var i=0;i<data.length;i++){
                    x_data.push(data[i].key_as_string)
                    y_data.push(data[i].doc_count)
                }

                option = {
                    title: {
                        text: '话题热度'
                    },
                    tooltip: {
                        triggerOn: 'onmousemove',
                        formatter: function(params) {
                            return '时间: ' + params.name + '<br>文章数: ' + params.value + '篇';
                        }
                    },
                    xAxis: {
                        boundaryGap: false,
                        data: x_data,
                        axisLabel: {
                            color: '#000000'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#BFBFBF'
                            }
                        }
                    },
                    yAxis: {
                        axisLabel: {
                            color: '#000000'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#BFBFBF'
                            }
                        }
                    },
                    series: [{
                        type: 'line',
                        data: y_data,
                        color: ['#2F42FF'],
                        symbolSize: 10/*,
                         label:{
                         normal:{
                         show:true//圆点上显示值
                         }
                         }*/
                    }]
                };
                myChart.setOption(option);
            },
            dataType: "json",
        });
    });


    var dates = [],
            values = [];
    option = {
        title: {
            text: '话题热度'
        },
        tooltip: {
            triggerOn: 'onmousemove',
            formatter: function(params) {
                return '时间: ' + params.name + '<br>文章数: ' + params.value + '篇';
            }
        },
        xAxis: {
            boundaryGap: false,
            data: dates,
            axisLabel: {
                color: '#000000'
            },
            axisLine: {
                lineStyle: {
                    color: '#BFBFBF'
                }
            }
        },
        yAxis: {
            axisLabel: {
                color: '#000000'
            },
            axisLine: {
                lineStyle: {
                    color: '#BFBFBF'
                }
            }
        },
        series: [{
            type: 'line',
            data: values,
            color: ['#2F42FF'],
            symbolSize: 10/*,
             label:{
             normal:{
             show:true//圆点上显示值
             }
             }*/
        }]
    };

    myChart.setOption(option);

</script>


<script type="text/javascript">
    /*!
     * Create an array of word objects, each representing a word in the cloud
     */
    var word_array = [
        {text: "舆情", weight: 15},
        {text: "新闻", weight: 12, link: "http://jquery.com/"},
        {text: "关键词", weight: 6, html: {title: "I can haz any html attribute"}},
        {text: "词云", weight: 8},
        {text: "主题", weight: 6},
        {text: "天下大事", weight: 11},
        {text: "国际国内", weight: 9},
        {text: "娱乐八卦", weight: 10},
        {text: "时讯", weight: 8},
        {text: "贸易", weight: 9},
        {text: "行业走向", weight: 7},
        {text: "解读", weight: 5},
        {text: "科技", weight: 11}
        // ...as many words as you want
    ];

    $(function() {
        // When DOM is ready, select the container element and call the jQCloud method, passing the array of words as the first argument.
        $("#news_word_cloud").jQCloud(word_array);
    });
</script>

<script type="text/javascript">
    var res_news_list;
    //用于换页时参数
    var global_post_data;
    $("#news_search_btn").click(function(){
        var polarity = $("#polarity_select option:selected").val();
        var news_src = $("#src_select option:selected").val();
        var news_topic = $("#topic_input").val();
        var date_range = $("#time_select option:selected").val();
        var post_data = {
            "polarity": polarity,
            "src": news_src,
            "topic": news_topic,
            "date_range": date_range,
        };
        global_post_data = post_data;//换页导航时用
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:8888/?target=news_search",
            data: JSON.stringify(post_data), //可选参数
            success: function(data, status){
                $("#news_block_head").html('<h4 style="color: gainsboro">根据您的条件筛选出'+data.total+'条舆情</h4>')
                var news_list = data.news_list;
                res_news_list = news_list;
                $("#news_list").empty()
                for (var i=0,len=news_list.length; i<len; i++ in news_list){
                    var table_content = "";
                    table_content = table_content + "<tr>"
                    table_content = table_content + "<td><a href='"+news_list[i].url+"'>"+news_list[i].title+"</a></td>"
                    table_content = table_content + "<td>"+news_list[i].src+"</td>"
                    table_content = table_content + "<td>"+news_list[i].category+"</td>"
                    table_content = table_content + "<td>"+news_list[i].polarity+"</td>"
                    table_content = table_content + "<td>"+news_list[i].pub_time+"</td>"
                    table_content = table_content + "<td>"+news_list[i].score+"</td>"
                    table_content = table_content + "<td><a href='javascript:;' onclick='news_analyze("+i+")'>单篇分析</a></td></tr>"
                    $("#news_list").append(table_content)
                }

                //下方分页导航
                var page_cnt = Math.min(data.total/20+1, 30);
                var page_nav_html = ""
                for (var i=1;i<=page_cnt;i++){
                    page_nav_html += "<a href='javascript:;' onclick='page_nav("+i+")' style='margin: 2px'>"+i+"</a>"
                }
//                alert(page_nav_html)
                $("#page_nav").html(page_nav_html)
//                alert("数据: \n" + data.news_list[0].title + "\n状态: " + status);
            },
            dataType: "json",
             //可选参数
        });
    });

    function news_analyze(index) {
        var post_data = {
            "news_url":res_news_list[index].url,
            "news_title": res_news_list[index].title,
            "news_src": res_news_list[index].src
        }
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:8888/?target=news_analyze",
            data: JSON.stringify(post_data), //可选参数
            success: function(data, status){
                var news_keywords = data.news_keywords
                $("#news_word_cloud").empty();
                $("#news_word_cloud").jQCloud(news_keywords);
                document.getElementById("single_news_summary_1").innerText = data.news_summary[0].substr(0, 100);
                document.getElementById("single_news_summary_2").innerText = data.news_summary[1].substr(0, 100);
                document.getElementById("single_news_summary_3").innerText = data.news_summary[2].substr(0, 100);
            },
            dataType: "json"
        })
    };

    function page_nav(page_num) {
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:8888/?target=news_search&page_num="+page_num,
            data: JSON.stringify(global_post_data), //可选参数
            success: function(data, status){
                var news_list = data.news_list;
                res_news_list = news_list;
                $("#news_list").empty()
                for (var i=0,len=news_list.length; i<len; i++ in news_list){
                    var table_content = "";
                    table_content = table_content + "<tr>"
                    table_content = table_content + "<td><a href='"+news_list[i].url+"'>"+news_list[i].title+"</a></td>"
                    table_content = table_content + "<td>"+news_list[i].src+"</td>"
                    table_content = table_content + "<td>"+news_list[i].category+"</td>"
                    table_content = table_content + "<td>"+news_list[i].polarity+"</td>"
                    table_content = table_content + "<td>"+news_list[i].pub_time+"</td>"
                    table_content = table_content + "<td>"+news_list[i].score+"</td>"
                    table_content = table_content + "<td><a href='javascript:;' onclick='news_analyze("+i+")'>单篇分析</a></td></tr>"
                    $("#news_list").append(table_content)
                };},
            dataType: "json",
        })

    };



</script>
</body>
</html>